<template>
    <div class="splashDrone">
        <div v-if="!isMobile" class="pc">
            <full-page :options="options">
                <div class="fp-auto-height section">
                    <PcHeader/>
                </div>

                <div class="section-1 section">
                    <img src="https://cdn.swellpro.com/newthree/first-1.jpg"/>

                    <div class="text-wrap">
                        <div class="container">
                            <div class="animated" :class="['animated', { 'fadeInUp' : pageIndex === 1 }]">
                                <p class="title">SplashDrone 3+</p>

                                <p class="description">
                                    The latest SplashDrone 3+ is the most reliable and versatile waterproof drone yet.With its modular waterproof accessories, you can quickly change the drone to suit your needs. Choose from accessories such as cameras for filming or release mechanisms for fishing or search and rescue.It is an all-purpose, all-weather, floating, waterproof flying platform.
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="back-wrap"></div>
                </div>

                <div class="section-2 section">
                    <div class="container">
                        <!-- <p :class="['animated', 'title', { 'fadeInUp' : pageIndex === 2 }]">
                            New features and improvements exclusive To the SplashDrone 3+
                        </p> -->

                        <!-- <div :class="['animated', 'img-wrap', 'delay-z3s', { 'fadeInUp' : pageIndex === 2 }]">
                            <img src="//cdn.swellpro.com/newSD/video.png"/>

                            <div class="icon-wrap" @click="openVideo">
                                <div>
                                    <div class="icon-wrap__shadow">
                                        <i class="iconfont icon-z"></i>
                                    </div>

                                    <p>Watch the product introduction video</p>
                                </div>
                            </div>
                        </div> -->

                        <div :class="['animated', 'icons', { 'fadeInUp' : pageIndex === 2 }]">
                            <div class="item" v-for="(item, index) in icons" :key="index">
                                <div>
                                    <i :class="['iconfont', item.class, { 'iconfont__pad' : item.needPading}]"></i>

                                    <p>
                                        {{item.description}}
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="mask" v-if="isShowVideo1" @click="isShowVideo1 = false">
                            <video data-v-6da13571="" src="//cdn.swellpro.com/FILMING%20&%20BOATING.mp4" controls="controls" :class="['mask-video', {'mask-video__active': this.videoActive1}]" autoplay>
                                您的浏览器不支持 video 标签。
                            </video>
                        </div>
                    </div>

                </div>

                <section class="section-3 section" :style="{'height': this.winthHeight + 'px'}">
                    <div class="container">
                        <div :class="['animated', { 'fadeInUp' : pageIndex === 3 }]">
                            <p class="title">Tough & Waterproof</p>

                            <p class="description">
                                The SplashDrone 3+ fuselage is made from durable reinforced ABS to ensure a perfect waterproof seal. Each drone undergoes at least two computerised pressure tests during production to guarantee 100% waterproofing. All parts, both inside and out, are corrosion resistant and designed for marine use.
                            </p>

                            <div class="other">
                                    <p class="item">Floating design</p>
                                    <p class="item">Corrosion-resistant throughout</p>
                                    <p class="item">All weather use (rain and snow)</p>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="section-4 section">
                    <div class="wrap" 
                        v-for="(item, index) in aircrafts" 
                        :key="index" 
                        :class="['wrap', {'wrap__active': activeIndex === index}]">
                        <div class="container">
                            <div class="title-wrap">
                                <p class="bigTitle" @click="() => activeIndex++">
                                    {{item.bigTitle}}<span>{{item.span}}</span>
                                </p>
                                <p class="miniText">{{item.miniText}}</p>

                                <p class="title">{{item.title}}</p>
                                <p class="description">
                                    {{item.description}}
                                </p>
                            </div>

                            <div :class="['img-wrap', { 'img-wrap__special': index === 2 }]">
                                <img :src="item.img" class="img"/>
                            </div>
                            
                        </div>
                    </div>
                </section>

                <div class="section-5 section">
                    <div v-for="(item, index) in controller" :key="index" :class="['wrap', {'wrap__active': controllerIndex === index}]">
                        <div class="container">
                            <div class="title-wrap">
                                <p class="title">{{item.title}}</p>
                                <p class="description">
                                    {{item.description}}
                                </p>
                            </div>
                            <div :class="['img-wrap', item.className]">
                                <img :src="item.img" alt="">

                                <div class="one-text" v-if="index === 1">
                                    <div>
                                        <p>Fine control of drone rotation</p>
                                    </div>
                                </div>

                                <div class="two-text" v-if="index === 1">
                                    <div>
                                        <p>Fine control of drone panning motion</p>
                                    </div>
                                </div>

                                <div class="three-text" v-if="index === 2">
                                    <div>
                                        <p>Easily change Flight modes during flight to suit your needs.</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="wrap-indicator">
                            <div>
                                <p v-for="(item, index) in controller" :key="index" :class="{'controller_active' : controllerIndex === index}" @click="() => controllerIndex = index">{{item.title}}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="section-6 section">
                    <div :class="['animated', 'container', { 'fadeInDown' : pageIndex === 6 }]">
                        <p class="title">App Control</p>
                        <p class="description">
                            With the optional GroundStation module, your mobile phone or GPS-enabled tablet or phone can take control of the SplashDrone 3+ with your fingertip! The Swellpro FLY APP enables several smart flight modes, which drastically reduces manual input from the pilot, making flying the SplashDrone 3+ even easier.
                        </p>
                    </div>

                    <div class="feature">
                        <div class="container">
                            <img src="//cdn.swellpro.com/Follow Me.jpg" class="img-1"/>
                            <img src="//cdn.swellpro.com/Circling Flight.jpg" class="img-2"/>
                            <img src="//cdn.swellpro.com/Mission Planning.jpg" class="img-3"/>
                            <img src="//cdn.swellpro.com/Tap to Fly.jpg" class="img-4"/>
                        </div>
                    </div>

                    <div :class="['animated', 'img-wrap', { 'fadeInUp' : pageIndex === 6 }]">
                        <img src="//cdn.swellpro.com/newSD/iphonex-TA_optimized.png" alt="">
                    </div>
                </div>

                <div class="section-7 section">
                     <div class="back-2">
                        <div class="container">
                            <div :class="['animated', 'item', { 'fadeInLeft' : pageIndex === 7 }]">
                                <div class="text-wrap">
                                    <p class="title">PowerFlip - Self-righting on command</p>
                                    <p class="description">
                                        Just being able to float is not enough.  Choppy waves or a fast landing can invert your drone. Relax, If a wave flips your drone over, SwellPro’s patented power-flip feature will right the drone, ready to take-off again.
                                    </p>
                                </div>
                            </div>
                            <div :class="['animated', 'item', { 'fadeInRight' : pageIndex === 7 }]">
                                <img src="//cdn.swellpro.com/newthree/shark.jpg" alt="科技插图1 copy 3.jpg">

                                <div class="item-icon" @click="isShowVideo2 = true">
                                    <div>
                                        <div class="item-icon__shadow">
                                            <i class="iconfont icon-z"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mask" v-if="isShowVideo2" @click="isShowVideo2 = false">
                            <video data-v-6da13571="" src="//cdn.swellpro.com/FILMING%20&%20BOATING.mp4" controls="controls" :class="['mask-video', {'mask-video__active': this.videoActive2}]" autoplay>
                                您的浏览器不支持 video 标签。
                            </video>
                        </div>
                    </div>

                    <div class="back-1">
                        <div class="container">
                            <div :class="['animated', 'item', { 'fadeInLeft' : pageIndex === 7 }]">
                                <img src="//cdn.swellpro.com/newthree/科技插图1 copy 3.jpg" alt="科技插图1 copy 3.jpg">
                            </div>
                            <div :class="['animated', 'item', 'right', { 'fadeInRight' : pageIndex === 7 }]">
                                <div class="text-wrap">
                                    <p class="title">Fly Safely</p>
                                    <p class="description">
                                        SplashDrone 3+ includes multiple layers of protection to keep your aircraft safe and help ensure your drone comes home safely.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="back-2">
                        <div class="container">
                            <div :class="['animated', 'item', { 'fadeInLeft' : pageIndex === 7 }]">
                                <div class="text-wrap">
                                    <p class="title">Return Home</p>
                                    <p class="description">
                                        If the controller signal is lost, the SplashDrone 3+ returns to the starting point and lands gently. You can also tap Return-Home on the app or flick the Return-Home switch on the remote controller to retrieve the drone.
                                    </p>
                                </div>
                            </div>
                            <div :class="['animated', 'item', { 'fadeInRight' : pageIndex === 7 }]">
                                <img src="//cdn.swellpro.com/newthree/科技插图1 copy.jpg" alt="科技插图1 copy 3.jpg">
                            </div>
                        </div>
                    </div>

                    <div class="back-1">
                        <div class="container">
                            <div :class="['animated', 'item', { 'fadeInLeft' : pageIndex === 7 }]">
                                <img src="//cdn.swellpro.com/newthree/科技插图1 copy 2.jpg" alt="Low Battery Alerts">
                            </div>
                            <div :class="['animated', 'item', 'right', { 'fadeInRight' : pageIndex === 7 }]">
                                <div class="text-wrap">
                                    <p class="title">Low Battery Alerts</p>
                                    <p class="description">
                                        Three low-level battery warnings protect you during flight. If the battery voltage reaches a low level, the remote controller will display a clear flashing notice for the pilot. If the battery level becomes critical, the drone will auto-land.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="back-2">
                        <div class="container">
                            <div :class="['animated', 'item', { 'fadeInLeft' : pageIndex === 7 }]">
                                <div class="text-wrap">
                                    <p class="title">Lost Drone Location Beacon</p>
                                    <p class="description">
                                        If you inadvertently lose or crash your drone out of sight, you will instantly have the drone's location pinpointed on the APP’s map, even with low batteries. (GroundStation module required).
                                    </p>
                                </div>
                            </div>
                            <div :class="['animated', 'item', { 'fadeInRight' : pageIndex === 7 }]">
                                <img src="//cdn.swellpro.com/newthree/科技插图1 copy.jpg" alt="科技插图1 copy 3.jpg">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="section-common section">
                    <div class="section-back" :style="{'height': this.winthHeight + 'px'}">
                        <div :class="['animated', 'top',  { 'zoomIn' : pageIndex === 8 }]">
                            <p class="title">
                                FILMING & BOATING
                            </p>

                            <p class="description">
                                Outfitted with our state-of-the-art waterproof gimbal 4K camera, SplashDrone 3+ is a perfect flying camera for taking epic photos and videos - over water, in the rain, storm, snow and even underwater. Drones allow you to capture your boat and spectacular ocean scenery from a new perspective, but most drones just aren’t built for the task. Like other equipment on your boat, you need your drone to be waterproof. 
                            </p>

                            <a class="button" @click="isShowVideo3 = true">
                                Learn more
                            </a>
                        </div>

                        <div class="mask mask-white" v-if="isShowVideo3" @click="isShowVideo3 = false">
                            <div class="container" @click.stop="">
                                <video data-v-6da13571="" src="//cdn.swellpro.com/FILMING%20&%20BOATING.mp4" controls="controls" :class="['mask-video', {'mask-video__active': this.videoActive3}]" autoplay>
                                    您的浏览器不支持 video 标签。
                                </video>

                                <div :class="['text-wrap', {'text-wrap__active': this.videoActive3}]">
                                    <p class="title">
                                        FILMING & BOATING
                                    </p>

                                    <p>
                                        Outfitted with our state-of-the-art waterproof gimbal 4K camera, SplashDrone 3+ is a perfect flying camera for taking epic photos and videos - over water, in the rain, storm, snow and even underwater. Drones allow you to capture your boat and spectacular ocean scenery from a new perspective, but most drones just aren’t built for the task. Like other equipment on your boat, you need your drone to be waterproof. 
                                    </p>
                                    <p>
                                        Swellpro’s unparalleled, fully waterproof 4K gimbal cameras capture smooth videos and sharp photos both while flying as well as underwater when floating. High-power brushless gimbal motors ensure shake-free footage, even during high-speed water landings. A special hydrophobic coating helps ensure a clear, dry lens as soon as you take SplashDrone 3+ back to the air or when flying in rain.
                                    </p>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="swiper">
                        <div class="swiper-container" :class="swiperClass" :style="{'transform': `translate(-${pos1 * 40}%, 0)`}">
                            <img v-for="(img, index) in swiper1" :key="index + 'swiper1'" :src="img"/>
                            <img v-for="(img, index) in swiper1" :key="index + 'swiper2'" :src="img"/>
                        </div>
                    </div>
                </div>

                <div class="section-common section">
                    <div :class="['animated', 'top', { 'zoomIn' : pageIndex === 9 }]">
                        <p class="title">
                            Waterproof 3-axis Gimbal 4K Camera
                        </p>

                        <p class="description">
                            Swellpro’s unparalleled, fully waterproof 4K gimbal camera captures smooth videos and sharp photos while flying as well as underwater when the drone is floating. High-power brushless gimbal motors ensure shake-free footage even during high-speed water landings. A special hydrophobic coating helps clear and dry the lens as soon as your SplashDrone 3+ returns to the air or when flying in rain.
                        </p>

                        <img src="//cdn.swellpro.com/newthree/4Kjh_optimized.png" class="product"/>

                        <p class="title">PL3</p>

                        <div class="description-content">
                            <p class="description-2">2.7k colour camera</p>
                            <p class="description-2">1.2kg</p>
                            <p class="description-2">Search and Rescue</p>
                        </div>

                        <!-- <a class="button">
                            Learn more
                        </a> -->
                    </div>

                    <div class="backImg backImg-1 white">
                        <div :class="['animated', { 'fadeInUp' : pageIndex === 9 }]">
                            <div class="title">FISHING</div>

                            <p class="description">A bait release module turns the waterproof SplashDrone 3+ into a awesome fishing drone that can dramatically extending your casting range and drop multiple baits at once.  Three bundles are available, including a low-light version.</p>

                            <!-- <a class="button">
                                Learn more
                            </a> -->
                        </div>
                    </div>

                    <div class="swiper">
                        <div class="swiper-container" :class="swiperClass" :style="{'transform': `translate(-${pos2 * 40}%, 0)`}">
                            <img v-for="(img, index) in swiper2" :key="index + 'swiper1'" :src="img"/>
                            <img v-for="(img, index) in swiper2" :key="index + 'swiper2'" :src="img"/>
                        </div>
                    </div>
                </div>

                <div class="section-common section">
                    <div :class="['animated', 'top', { 'zoomIn' : pageIndex === 10 }]">
                        <p class="title">
                            Waterproof Payload Release PL3, PL2
                        </p>

                        <p class="description">
                            Swellpro’s patented remote payload release mechanism turns the SplashDrone 3+ into an aerial bait delivery system able to deliver 1.2kg of bait and burley to targeted locations. There are currently four remote payload release options to choose from.
                        </p>

                        <div class="product-wrap">
                            <div class="product-wrap__item">
                                <img src="//cdn.swellpro.com/newthree/SD3+PL2-6 Copy.jpg" class="a-img"/>

                                <p class="title">PL2</p>

                                <div class="description-content">
                                    <p class="description-2">2.7k colour camera</p>
                                    <p class="description-2">1.2kg</p>
                                    <p class="description-2">Search and Rescue</p>
                                </div>
                            </div>

                            <div class="product-wrap__item">
                                <img src="//cdn.swellpro.com/newthree/PL3-1.jpg" class="a-img"/>

                                <p class="title">PL3</p>

                                <div class="description-content">
                                    <p class="description-2">2.7k colour camera</p>
                                    <p class="description-2">1.2kg</p>
                                    <p class="description-2">Search and Rescue</p>
                                </div>
                            </div>

                            <div class="product-wrap__item">
                                <img src="//cdn.swellpro.com/newthree/PL4-2.jpg" class="a-img"/>

                                <p class="title">PL4-HS</p>

                                <div class="description-content">
                                    <p class="description-2">2.7k colour camera</p>
                                    <p class="description-2">1.2kg</p>
                                    <p class="description-2">Search and Rescue</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="backImg white backImg-2">
                        <div :class="['animated', { 'fadeInUp' : pageIndex === 10 }]">
                            <div class="title">Search & Rescue</div>

                            <p class="description">
                                By adding a waterproof payload release module or a specially designed waterproof rescue unit to the SpashDrone 3+, you have a cost-effective, robust, waterproof rescue solution.Three bundles are available for Search & Rescue operations.
                            </p>

                            <a class="button" @click="isShowVideo4 = true">
                                Learn more
                            </a>

                            <div class="mask mask-white" v-if="isShowVideo4" @click="isShowVideo4 = false">
                                <div class="container" @click.stop="">
                                    <div :class="{'container__active': videoActive4}">
                                        <p class="title">Save Lives Faster</p>
                                        <p class="description">
                                            Increase the effectiveness of your Search & Rescue efforts by adding a SplashDrone 3+ to your team. Many drones are not suited to the rigors of harsh rescue environments. The SplashDrone 3+ is the world’s first and most robust waterproof flying platform built to perform search missions in rain, snow, and flooded area and over the ocean. The waterproof quick-release payload mechanisms can take up to 1.2kg of life-saving equipment to people in need. Two purpose-built rescue buoyancy modules are available for ocean and lake rescue in normal and low-light conditions. The SplashDrone 3+ can not only assist first responders with better situational awareness and fast delivery of life saving equipment or supplies by air, but can also be used by amateurs to deliver rapid assistance without risking themselves.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="swiper">
                        <div class="swiper-container" :class="swiperClass" :style="{'transform': `translate(-${pos2 * 40}%, 0)`}">
                            <img v-for="(img, index) in swiper3" :key="index + 'swiper1'" :src="img"/>
                            <img v-for="(img, index) in swiper3" :key="index + 'swiper2'" :src="img"/>
                        </div>
                    </div>

                    <div class="top">
                        <p class="title">
                            Featured accessories SAR1, SAR2, PL3
                        </p>

                        <div class="product-wrap">
                            <div class="product-wrap__item">
                                <img src="//cdn.swellpro.com/newthree/SD3+SAR1.png" class="a-img"/>

                                <p class="title">SAR1</p>

                                <div class="description-content">
                                    <p class="description-2">2.7k colour camera</p>
                                    <p class="description-2">1.2kg</p>
                                    <p class="description-2">Search and Rescue</p>
                                </div>
                            </div>

                            <div class="product-wrap__item">
                                <img src="//cdn.swellpro.com/newthree/SD3+SAR2.png" class="a-img"/>

                                <p class="title">SAR2</p>

                                <div class="description-content">
                                    <p class="description-2">2.7k colour camera</p>
                                    <p class="description-2">1.2kg</p>
                                    <p class="description-2">Search and Rescue</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="fp-auto-height section">
                    <PcFooter/>
                </div>
            </full-page>
        </div>
    </div>
</template>

<script>
import throttle from 'lodash/throttle'
import PcHeader from '~/components/pc/common/swellpro-header'
import PcFooter from '~/components/pc/common/swellpro-footer'
import 'animate.css'
export default {
    layout: 'index',

    data () {
        return {
            videoActive4: false,
            videoActive3: false,
            videoActive1: false,
            videoActive2: false,
            isShowVideo4: false,
            isShowVideo3: false,
            isShowVideo2: false,
            isShowVideo1: false,
            isNeedTrans2: true,
            pos2: 0,
            swiper2: [
                '//cdn.swellpro.com/newthree/beautiful-sea-wide-hd-desktop-background-wallpaper-photos-full-free copy 6.jpg',
                '//cdn.swellpro.com/newthree/beautiful-sea-wide-hd-desktop-background-wallpaper-photos-full-free copy 4.jpg',
                '//cdn.swellpro.com/newthree/beautiful-sea-wide-hd-desktop-background-wallpaper-photos-full-free copy 5.jpg'
            ],
            isNeedTrans1: true,
            pos1: 0,
            swiper1: [
                '//cdn.swellpro.com/newthree/beautiful-sea-wide-hd-desktop-background-wallpaper-photos-full-free copy 3.jpg',
                '//cdn.swellpro.com/newthree/beautiful-sea-wide-hd-desktop-background-wallpaper-photos-full-free copy.jpg',
                '//cdn.swellpro.com/newthree/beautiful-sea-wide-hd-desktop-background-wallpaper-photos-full-free copy 10.jpg'
            ],
            swiper3: [
                '//cdn.swellpro.com/newthree/beautiful-sea-wide-hd-desktop-background-wallpaper-photos-full-free copy 9.jpg',
                '//cdn.swellpro.com/newthree/beautiful-sea-wide-hd-desktop-background-wallpaper-photos-full-free copy 7.jpg',
                '//cdn.swellpro.com/newthree/beautiful-sea-wide-hd-desktop-background-wallpaper-photos-full-free copy 8.jpg'
            ],
            pageIndex: 0, // 轮播页面下标
            startTime: new Date(),
            activeIndex: -1,
            controllerIndex: -1,
            controller: [
                {
                    title: 'All in One Remote Controller',
                    description: 'The SplashDrone 3+ includes a custom-designed, remote controller with integrated display. Redesigned controls maximize ease-of-use and efficiency and the high-brightness 5" FPV screen clearly displays live video and overlaid (OSD) flight data without the need for any additional equipment. Flight control, payload release and camera controls are all at your fingertips.',
                    img: '//cdn.swellpro.com/newSD/controll.png',
                    className: ''
                },
                {
                    title: 'Smooth+ Control',
                    description: "Engage our new Smooth+ controls to switch from joystick to fine knob control of drone movement. Your flight and footage will be instantly smoother as you dial in just the right amount of turn or bank.  Easily setup a smooth transition or dial in an orbit. Even if you are new to drone controls, you can fly as smoothly as a pro.",
                    img: '//cdn.swellpro.com/newthree/part4-p2.png',
                    className: 'motor'
                },
                {
                    title: 'Cruise Mode',
                    description: 'Switch to Cruise mode and fly with a single joystick - carving sweeping, banked turns with ease.  Keep a moving subject in the frame while you concentrate on camera angles and composition.',
                    img: '//cdn.swellpro.com/newthree/part4-p4.jpg',
                    className: 'motor'
                }
            ],
            aircrafts: [
                {
                    bigTitle: '365',
                    span: 'd',
                    miniText: 'used',
                    title: 'All-weather Power System',
                    description: 'Fly the SplashDrone 3+ safely and smoothly with more confidence on water, in rain and snow. The S3 flight controller, integrated with new sensors and a powerful propulsion system, allows for greater sensitivity and accuracy than ever.',
                    img: 'https://cdn.swellpro.com/newthree/IMG_1094.JPG'
                },
                {
                    bigTitle: '15',
                    span: 's',
                    miniText: 'time',
                    title: 'Quick-Fit Propellers',
                    description: "Redesigned carbon-fibre propellers are light and stiff to efficiently transform the motors' power into thrust. A new quick-fit design enables fast and secure attachment of the propellers to the motors without tools.",
                    img: 'https://cdn.swellpro.com/newthree/IMG_1094.JPG',
                },
                {
                    bigTitle: '65',
                    span: 'km/h',
                    miniText: 'speed',
                    title: 'High Thrust Motors',
                    description: "The powerful new motors provide strong performance, speed and lifting capacity. A special coating system ensures maximum resistance to salt water corrosion and power delivery for take-off from water and in heavy rain.",
                    img: 'https://cdn.swellpro.com/newthree/IMG_1094.JPG',
                    // imgTwo: '//cdn.swellpro.com/newthree/boating3 copy 4.jpg',
                },
                {
                    bigTitle: '24',
                    span: '',
                    miniText: 'satellites',
                    title: 'S3 Flight Controller',
                    description: "The S3 constantly checks for errors and offers redundancy to improve flight stability. The dual-mode GPS locks onto up to 24 satellites from the GPS and GLONASS systems for improved accuracy and speed of positioning",
                    img: 'https://cdn.swellpro.com/newthree/IMG_1094.JPG'
                }
            ],
            options: {
                navigation: true,
                scrollOverflow: true,
                fadingEffect: true,
                onLeave: this.onLeave,
                afterLoad: this.afterLoad,
                scrollingSpeed: 600,
                navigationColor: '#fff'
            },
            isMobile: this.$isMobile,
            winthHeight: '',
            icons: [
                {
                    class: 'icon-control-fill',
                    description: 'Extended flight times'
                },
                {
                    class: 'icon-ziyuan',
                    needPading: 'true',
                    description: 'New LiHV battery with 3 levels of low battery warning'
                },
                {
                    class: 'icon-185036remotecontrolstreamline',
                    description: 'New Smooth remote controls'
                },
                {
                    class: 'icon-3600',
                    description: 'Power-Flip function when floating'
                },
                {
                    class: 'icon-Waterproofdesign',
                    description: 'Enhanced waterproofing throughout'
                },
                {
                    class: 'icon-carryout',
                    description: 'Circuit board moisture protection coating',
                    needPading: 'true',
                },
                {
                    class: 'icon-iconlocation',
                    description: 'Lost Drone location Beacon option'
                },
                {
                    class: 'icon-control-fill',
                    description: 'Turned flight controll feel'
                },
                {
                    class: 'icon-camera',
                    description: 'ALL new 3-axis waterproof gimbal 4k camera',
                    needPading: 'true',
                },
                {
                    class: 'icon-185036remotecontrolstreamline',
                    description: 'New heat management system'
                },
                {
                    class: 'icon-fasten-classify',
                    description: 'Easier hatch fastenings'
                },
                {
                    class: 'icon-carryout',
                    description: 'External Power Button'
                },
            ]
        };
    },

    head: {
      script: [
        { src: '//cdn.bootcss.com/fullPage.js/3.0.7/vendors/scrolloverflow.min.js' }
      ],
    },

    components: {
        PcHeader,
        PcFooter
    },

    watch: {
        isShowVideo1(value) {
            if (value) {
                setTimeout(() => {
                    this.videoActive1 = true
                }, 100);
            } else {
                this.videoActive1 = false
            }
        },

        isShowVideo2(value) {
            if (value) {
                setTimeout(() => {
                    this.videoActive2 = true
                }, 100);
            } else {
                this.videoActive2 = false
            }
        },

        isShowVideo3(value) {
            if (value) {
                setTimeout(() => {
                    this.videoActive3 = true
                }, 100);
            } else {
                this.videoActive3 = false
            }
        },

        isShowVideo4(value) {
            if (value) {
                setTimeout(() => {
                    this.videoActive4 = true
                }, 100);
            } else {
                this.videoActive4 = false
            }
        }
    },

    computed: {
        swiperClass() {
            return {
                'swiper-container': true,
                'swiper-transition': this.isNeedTrans1
            }
        },

        swiperClass2() {
            return {
                'swiper-container': true,
                'swiper-transition': this.isNeedTrans2
            }
        }
    },

    mounted() {
        this.winthHeight = document.body.clientHeight;

        setInterval(() => {
            this.startSwiper1();
        }, 3000);

        setInterval(() => {
            this.startSwiper2();
        }, 3000);
    },

    methods: {
        openVideo() {
            this.isShowVideo1 = true;
        },

        startSwiper2() {
            const { length } = this.swiper2;
            if (this.pos2 <= length) {
                this.isNeedTrans2 = this.pos2 !== length
                this.pos2 = this.pos2 !== length ? this.pos2 + 1 : 0;
            }
        },

        startSwiper1() {
            const { length } = this.swiper1;
            if (this.pos1 <= length) {
                this.isNeedTrans1 = this.pos1 !== length
                this.pos1 = this.pos1 !== length ? this.pos1 + 1 : 0;
            }
        },

        afterLoad(origin, destination, direction) {
            const { index } = destination;

            this.activeIndex = index === 4 ? 0 : -1;

            this.controllerIndex = index === 5 ? 0 : -1;

            this.pageIndex = index;
        },

        onLeave(origin, nextIndex, direction) {
            const flag = this.activeIndex;
            if (origin.index === 4 && nextIndex.index === 5) { // 如果在第四小节,往下一个小节走
                const Now = new Date()
                if (Now - this.startTime > 1000) {
                    if (this.activeIndex < 3) {
                        this.startTime = Now
                        this.activeIndex++
                        return false
                    } else {
                        return true
                    }
                }

                return false;
            }

            if (origin.index === 4 && nextIndex.index === 3) { // 如果在第四小节，往上一个小节走
                const Now = new Date();
                if (Now - this.startTime > 1000) {
                    if (this.activeIndex > 0) {
                        this.startTime = Now
                        this.activeIndex--
                        return false
                    } else {
                        return true
                    }
                }
                return false;
            }

            if (origin.index === 5 && nextIndex.index === 6) { // 如果在第四小节,往下一个小节走
                const Now = new Date()
                if (Now - this.startTime > 1000) {
                    if (this.controllerIndex < 2) {
                        this.startTime = Now
                        this.controllerIndex++
                        return false
                    } else {
                        return true
                    }
                }

                return false;
            }

            if (origin.index === 5 && nextIndex.index === 4) { // 如果在第四小节，往上一个小节走
                const Now = new Date();
                if (Now - this.startTime > 1000) {
                    if (this.controllerIndex > 0) {
                        this.startTime = Now
                        this.controllerIndex--
                        return false
                    } else {
                        return true
                    }
                }
                return false;
            }

        },
    }
};

</script>
<style lang='stylus'>
.splashDrone
    .pc
        color #fff
        width 100%
        section
            background-position 50%
            background-size cover
            background-repeat no-repeat
        .title
            font-size 22px
            font-weight 600
            margin-bottom 20px
        .description
            font-size 15px
            margin-bottom 20px
        .section-1
            position relative
            img
                width 100%
                height 100%
                display block
            .text-wrap
                position absolute
                left 0px
                bottom 30px
                color #fff
                width 100%
                z-index 5
                .container
                    width 1000px
            .back-wrap
                position absolute
                left 0px
                top 0px
                width 100%
                height 100%
                z-index 2
                background rgba(0,0,0,.34)
        .section-2
            background rgba(74,74,74,1)
            position relative
            .container
                width 1000px
                color #fff
                height 100%
                display flex
                align-items center
                .title
                    text-align center
                    width 430px
                    margin 0 auto
                    font-size 18px
                    padding 40px 0
                .img-wrap
                    width 100%
                    position relative
                    >img
                        display block
                        width 100%
                    .icon-wrap
                        position absolute
                        left 0px
                        top 0px
                        width 100%
                        height 100%
                        display flex
                        justify-content center
                        align-items center
                        cursor pointer
                        transition all .3s
                        &__shadow
                            width 50px
                            height 50px
                            display flex
                            justify-content center
                            align-items center
                            border-radius 50%
                            background rgb(26,26,26)
                            margin 0 auto 8px
                            .icon-z
                                font-size 30px
                                position relative
                                left 2px
                                top 2px
                        &:hover
                            .icon-z
                                color #f26444
                .icons
                    display flex
                    flex-flow row wrap
                    padding 25px 0
                    .item
                        flex 0 0 25%
                        display flex
                        justify-content center
                        align-items center
                        >div
                            margin-bottom 20px
                            .iconfont
                                margin-bottom 8px
                                font-size 28px
                                text-align center
                                display block
                                &__pad
                                    padding-top 18px
                            p
                                font-size 13px
                                text-align center
        .section-3
            width 100%
            text-align center
            background-image url('https://cdn.swellpro.com/newthree/Bitmap.jpg')
            .container
                width 1000px
                margin 0 auto
                .title
                    padding-top 50px
                .other
                    width 100%
                    display flex
                    justify-content center
                    .item
                        margin-right 20px
                        font-size 14px
        .section-4
            background #ffffff
            color #000
            position relative
            .wrap
                position absolute 
                left 0px
                top 0px
                width 100%
                height 100%
                transition all .1s
                opacity 0
                .container
                    width 1000px
                    text-align center
                    .title-wrap
                        transition all .4s
                        transition-delay .1s
                        transform translate3d(0, -25px,0)
                        opacity 0
                        .bigTitle
                            padding-top 60px
                            text-align center
                            font-size 50px
                            font-weight 600
                            span
                                margin-left 8px
                                font-size 20px
                                font-weight 300
                        .miniText
                            position relative
                            top -5px
                    .img
                        display block
                        width 800px
                        margin 0 auto
                        &-wrap
                            width 100%
                            margin 0 auto
                            transform translate3d(0, 40px,0)
                            opacity 0
                            transition all .4s
                            transition-delay .1s
                            position absolute
                            bottom 0
                            left 0
                            &__special
                                display flex
                                justify-content space-between
                        &-common
                            width 600px
                &__active
                    opacity 1
                    .container
                        .title-wrap
                            opacity 1
                            transform translate3d(0, 0, 0)
                        .img
                            &-wrap
                                transform translate3d(0, 0, 0)
                                opacity 1
        .section-5
            background rgb(57, 57, 57)
            position relative
            .wrap
                position absolute 
                left 0px
                top 0px
                width 100%
                height 100%
                transition all .1s
                opacity 0
                .container
                    width 700px
                    text-align center
                    .title-wrap
                        transition all .4s
                        transition-delay .1s
                        transform translate3d(0, -25px,0)
                        opacity 0
                        .title
                            padding-top 30px
                    .img-wrap
                        position absolute
                        bottom 60px
                        width 100%
                        left -20px
                        img
                            width 700px
                            margin 0 auto
                            display block
                            transform translate3d(0, 40px,0)
                            opacity 0
                            transition all .4s
                            transition-delay .1s
                        >div
                            transform translate3d(0, 40px,0)
                            opacity 0
                            transition all .4s
                            transition-delay .4s
                        .one-text
                            position absolute
                            left 10px
                            bottom -60px
                            font-size 12px
                            width 100%
                            text-align left
                            > div
                                width 700px
                                margin 0 auto
                                position relative
                                p
                                    width 200px
                                    &:after
                                        content ''
                                        position absolute
                                        left 75px
                                        top -210px
                                        width 1px
                                        height 210px
                                        background #fff
                        .two-text
                            position absolute
                            left 10px
                            bottom -135px
                            font-size 12px
                            width 100%
                            text-align left
                            >div
                                width 700px
                                margin 0 auto
                                position relative
                                p
                                    width 200px
                                    margin-left 500px
                                    &:after
                                        content ''
                                        position absolute
                                        left 555px
                                        top -95px
                                        width 1px
                                        height 90px
                                        background #fff
                        .three-text
                            position absolute
                            left 10px
                            bottom -135px
                            font-size 12px
                            width 100%
                            text-align left
                            >div
                                width 700px
                                margin 0 auto
                                position relative
                                p
                                    width 200px
                                    margin-left 400px
                                    &:after
                                        content ''
                                        position absolute
                                        left 480px
                                        top -230px
                                        width 1px
                                        height 220px
                                        background #fff
                    .motor
                        bottom 250px
                &__active
                    opacity 1
                    .container
                        .title-wrap
                            opacity 1
                            transform translate3d(0, 0, 0)
                        .img-wrap
                            img
                                transform translate3d(0, 0, 0)
                                opacity 1
                            >div
                                transform translate3d(0, 0, 0)
                                opacity 1
                .wrap-indicator
                    position absolute 
                    left 30px
                    top 0px
                    height 100%
                    display flex
                    align-items center
                    p
                        font-weight 300
                        font-size 12px
                        margin-bottom 20px
                        color rgb(117, 117, 117)
                        cursor pointer
                    .controller_active
                        font-weight 400
                        color #fff
                        font-size 16px
        .section-6
            position relative
            color #000
            .container
                width 800px
                text-align center
                padding-top 70px
            .img-wrap
                position absolute
                left 0px
                bottom 0px
                width 100%
                img
                    display block
                    width 600px
                    margin 0 auto
            .feature
                .container
                    width 800px
                    text-align left
                    padding-top 15px
                    img
                        width 200px
                        display block
                    .img
                        &-1
                            margin-left 130px
                        &-2
                            margin-top 70px
                        &-3
                            margin-left 450px
                            margin-top -150px
                        &-4
                            margin-left 600px
                            margin-top 50px
        .section-7
            color #fff
            position relative
            .container
                width 1000px
                display flex
                .item
                    flex 1
                    display flex
                    align-items center
                    position relative
                    .text-wrap
                        width 80%
                    img
                        width 100%
                        display block
                    &-icon
                        position absolute
                        left 0
                        right 0
                        width 100%
                        height 100%
                        display flex
                        justify-content center
                        align-items center
                        cursor pointer
                        &__shadow
                            width 50px
                            height 50px
                            display flex
                            justify-content center
                            align-items center
                            border-radius 50%
                            background rgb(26,26,26)
                            margin 0 auto 8px
                            .icon-z
                                font-size 30px
                                position relative
                                left 2px
                                top 2px
                        &:hover
                            .icon-z
                                color #f26444
                .right
                    justify-content flex-end
            .back-1
                background rgba(30, 30, 30, 1)
                padding 80px
            .back-2
                background rgba(36, 36, 36, 1)
                padding 80px
        .section-common
            position relative
            .section-back
                width 100%
                background-image url('//cdn.swellpro.com/newthree/9041.jpg_wh1200 copy 3 2.jpg')
                background-position 50%
                background-size cover
                background-repeat no-repeat
            .top
                text-align center
                color #000
                padding 30px 0
            .description
                width 70%
                margin 0 auto 30px
                font-size 13px
                &-2
                    margin-bottom 10px
                    font-size 12px
                &-content
                    margin-bottom 20px
            .button
                margin-top 20px
                color #000
                border 1px solid #000
                padding 6px 20px
                border-radius 20px
                font-size 13px
            .img
                width 100%
                display block
            .product
                display block
                margin 0 auto
                width 300px
            .backImg
                background-position 50%
                background-size cover
                background-repeat no-repeat
                height 600px
                color #000
                text-align center
                .title
                    padding-top 20px
                    text-align center
                .description
                    text-align center
                    width 800px
                &-1
                    background-image url('https://cdn.swellpro.com/newthree/2400X1100(1).jpg')
                &-2
                    background-image url('https://cdn.swellpro.com/newthree/9041.jpg_wh1200 copy 4.jpg')
                    position relative
                    .mask
                        height 600px
                        width 100%
                        .container
                            display flex
                            justify-content center
                            align-items center
                            >div
                                transform scale(0)
                                transition all .3s
                            &__active
                                transform scale(1)!important
            .white
                color #fff
                .button
                    color #fff
                    border 1px solid #fff
.fp-tableCell
    vertical-align initial
.swiper
    width 100%
    overflow hidden
    padding 8px 0
    &-container
        width 100%
        display flex
        flex-flow row no-wrap
        img
            display block
            width 40%
            box-sizing border-box
            padding-left 8px
    &-transition
        transition all 3s
        transition-timing-function linear
.product-wrap
    width 800px!important
    margin 50px auto 0!important
    display flex!important
    &__item
        flex 1
        border-right 1px solid rgba(0, 0, 0, .2)
        .a-img
            width 70%!important
            margin 0 auto 15px!important
        &:last-child
            border-right none
.zoomIn
    opacity 1
.mask
    position absolute
    left 0px
    top 0px
    width 100%
    height 100%
    background rgba(0, 0, 0, .8)
    &-video
        width 800px
        position fixed
        left 50%
        top 120px
        margin-left -400px
        z-index 2
        transform translate3d(0, 40px,0)
        transition all .5s
        opacity 0
        &__active
            opacity 1
            transform translate3d(0, 0, 0)
    &-white
        background rgba(255, 255, 255, .9)
        .mask-video
            position initial
            width 100%
            display block
            margin-left 0px
    .container
        width 800px
        height 100%
        overflow auto
        color #000
        .text-wrap
            margin 10px 0
            transform translate3d(0, 40px,0)
            transition all .5s
            transition-delay .3s
            opacity 0
            &__active
                opacity 1
                transform translate3d(0, 0, 0)
        .title
            margin 10px 0
</style>